<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部组件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app1">
    <div>这里是app1的作用域</div>
        <my-template></my-template>
    </div>

    <div id="app2">
        <div>这里是app2的作用域</div>
        <my-template></my-template>
    </div>

    <template id="template1">
        <button @click="addCount()">访问次数为{{count}}</button>
    </template>

    <script>
        Vue.component("MyTemplate", {
            
        })

        new Vue({
            el:"#app1",
            
            components:{
                "my-template":{
                    template:"#template1",
                    data(){
                        return {
                            count:0
                        }
                    },
                    methods: {
                        addCount(){
                            this.count++;
                        }
                    },
                }
            }
        })
        new Vue({
            el:"#app2",
            components:{
                "my-template":{
                    template:"#template1",
                    data(){
                        return{
                            count:0
                        }
                    },
                    methods:{
                        addCount(){
                            this.count++;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>